<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02表格和按钮</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">    
</head>
<body>
    <!-- table-striped 让tbody里面一行隔一行的背景色  table-bordered 给表格加上边框 -->
    <!-- <table class="table table-striped table-bordered"> -->
    <!-- table-hover让tbody下的表格悬停鼠标实现背景效果 table-responsive 设置响应式 小于768px出现边框-->
    <table class="table table-hover table-responsive">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <!-- 单独设置每一行的背景样式  标识普通的提示信息或动作 -->
            <tr class="info">
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>50</td>
            </tr>
            <!-- 标识成功或积极的动作 -->
            <tr class="success">
                <td>2</td>
                <td>李四</td>
                <td>男</td>
                <td>8</td>
            </tr>
            <!-- 隐藏行 -->
            <tr class="sr-only">
                <td>3</td>
                <td>阿妹</td>
                <td>男</td>
                <td>30</td>
            </tr>
            <tr>
                <td>4</td>
                <td>丽丽</td>
                <td>女</td>
                <td>16</td>
            </tr>
        </tbody>
    </table>

    <a href="#" class="btn btn-default">Link</a>
    <input type="button" class="btn btn-default" value="Input">
    <!-- 按钮的默认样式  成功样式  信息样式 -->
    <button class="btn btn-default">Button</button>
    <button class="btn btn-success">Button</button>
    <button class="btn btn-info">Button</button>

    <!-- 按钮的从大到小的样式 -->
    <button class="btn btn-lg">Button</button>
    <button class="btn btn-sm">Button</button>
    <button class="btn btn-xs">Button</button>

    <!-- 块级按钮 占据一行      按钮(点击)激活样式     按钮禁用样式 -->
    <button class="btn btn-info btn-block">Button</button>
    <button class="btn btn-info active">Button</button>
    <button class="btn btn-info disabled">Button</button>
    

        <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
        <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>